/* 
 *	jQuery文件上传插件,封装UI,上传处理操作采用Baidu WebUploader;
 *	@Author 黑爪爪;
 */
(function( $ ) {
    var webUploader;
    $.fn.extend({
        /*
         *	上传方法 opt为参数配置;
         *	serverCallBack回调函数 每个文件上传至服务端后,服务端返回参数,无论成功失败都会调用 参数为服务器返回信息;
         */
        diyUpload: function (opt, serverCallBack) {
            
            if ( typeof opt != "object" ) {
                alert('参数错误!');
                return;
            }
            //console.log(opt.IsBackImg);
            //console.log(opt.IsBackTxt);
            //console.log(opt.picTxtList);
            if (opt.picList.length >1) {
                backimg(opt.picList, opt.picTxtList, opt.IsBackImg, opt.IsBackTxt, opt.IsNotMod);
            }

            var $fileInput = $(this);
            var $fileInputId = $fileInput.attr('id');

            //组装参数;
            if( opt.url ) {
                opt.server = opt.url;
                delete opt.url;
            }

            if( opt.success ) {
                var successCallBack = opt.success;
                delete opt.success;
            }

            if( opt.error ) {
                var errorCallBack = opt.error;
                delete opt.error;
            }

            //迭代出默认配置
            $.each( getOption( '#'+$fileInputId ),function( key, value ){
                opt[ key ] = opt[ key ] || value;
            });

            if ( opt.buttonText ) {
                opt['pick']['label'] = opt.buttonText;
                delete opt.buttonText;
            }

             webUploader = getUploader( opt );

            if ( !WebUploader.Uploader.support() ) {
                alert( ' 上传组件不支持您的浏览器！');
                return false;
            }

            //绑定文件加入队列事件;
            webUploader.on('fileQueued', function( file ) {
                createBox($fileInput, file, webUploader);
            });

            //进度条事件
            webUploader.on('uploadProgress',function( file, percentage  ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar');
                $diyBar.show();
                percentage = percentage*100;
                showDiyProgress(percentage.toFixed(2), $diyBar);
                //$(".tijiao").text("图片上传中...");
            });   

            //全部上传结束后触发;
            webUploader.on('uploadFinished', function(){
                $fileInput.next('.parentFileBox').children('.diyButton').remove();
                $(".tijiao").text("提交");

            });
            //绑定发送至服务端返回后触发事件;
            webUploader.on('uploadAccept', function( object ,data ){
                if ( serverCallBack ) serverCallBack( data );
            });

            //上传成功后触发事件;
            webUploader.on('uploadSuccess',function( file, response ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar');
                //$fileBox.removeClass('diyUploadHover');
                $diyBar.fadeOut( 1000 ,function(){
                    $fileBox.children('.diySuccess').show();
                });

                console.log(opt.IsOneTmg);
                
                if (opt.IsOneTmg) {
                    $('.upload-pick').hide();//只传单图
                }

                console.log(opt.IsBackTxt);
                if (opt.IsBackTxt) {
                    $fileBox.find('.diyTxtPic').show();//没有图片描述
                }
                
                var jsonObject = jQuery.parseJSON(response._raw);
                $('#fileBox_' + file.id).attr('mya', jsonObject.id);
                $('#fileBox_' + file.id).attr('onclick', "PreViewPic(" + jsonObject.id + ")");
                console.log(response._raw);
                var dataSrc = $('#fileBox_' + file.id).find('.viewThumb').children('img').attr('src');
                //console.log(JSON.parse(response._raw).result);
                $.post("/js/webUpload_Img/imgup1.ashx", { _base64: dataSrc, _name: JSON.parse(response._raw).result}, function (data) {
                    console.log(data)
                });
                if ( successCallBack ) {
                    successCallBack( response );
                }
            });

            //上传失败后触发事件;
            webUploader.on('uploadError',function( file, reason ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar');
                showDiyProgress( 0, $diyBar , '上传失败!' );
                var err = '上传失败! 文件:'+file.name+' 错误码:'+reason;
                if ( errorCallBack ) {
                    errorCallBack( err );
                }
            });

            //选择文件错误触发事件;
            webUploader.on('error', function( code ) {
                var text = '';
                switch( code ) {
                    case  'F_DUPLICATE' : text = '该文件已经被选择了!' ;
                        break;
                    case  'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ;
                        break;
                    case  'F_EXCEED_SIZE' : text = '文件大小超过限制!';
                        break;
                    case  'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!';
                        break;
                    case 'Q_TYPE_DENIED' : text = '文件类型不正确或者是空文件!';
                        break;
                    default : text = '未知错误!';
                        break;
                }
                alert( text );
            });
             return webUploader;
        }
    });

    //Web Uploader默认配置;
    function getOption(objId) {
        /*
         *	配置文件同webUploader一致,这里只给出默认配置.
         *	具体参照:http://fex.baidu.com/webuploader/doc/index.html
         */
        return {
            //按钮容器;
            pick:{
                id:objId,
                label:""
            },
            auto: true,
            //类型限制;
            accept:{
                title:"Images",
                extensions:"gif,jpg,jpeg,bmp,png",
                mimeTypes:"image/*"
            },
            //配置生成缩略图的选项
            thumb:{
                width: 200,
                height:200,
                // 图片质量，只有type为`image/jpeg`的时候才有效。
                quality:90,
                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                allowMagnify:false,
                // 是否允许裁剪。
                crop:true,
                // 为空的话则保留原有图片格式。
                // 否则强制转换成指定的类型。
                //type: "image/jpeg"
            },
            //文件上传方式
            method:"POST",
            //服务器地址;
            server:"/js/webUpload_Img/imgup1.ashx",
            //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容
            sendAsBinary:false,
            // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失;
            chunked:false,
            // 分片大小
            chunkSize:512 * 1024,
            //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
            fileNumLimit:300,
            fileSizeLimit:500000 * 11024,
            fileSingleSizeLimit: 50000 * 11024,
            threads: 1,//上传并发数。允许同时最大上传进程数,为了保证文件上传顺序  
        };
    }

    //实例化Web Uploader
    function getUploader( opt ) {

        return new WebUploader.Uploader( opt );
    }

    /////图片回显 开时
    //////初始化
    //var uploader = getUploader(opt);

    var getFileBlob = function (url, cb) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.addEventListener('load', function () {
            cb(xhr.response);
        });
        xhr.send();
    };

    var blobToFile = function (blob, name) {
        blob.lastModifiedDate = new Date();
        blob.name = name;
        return blob;
    };

    var getFileObject = function (filePathOrUrl, cb) {
        getFileBlob(filePathOrUrl, function (blob) {
            cb(blobToFile(blob, 'test.jpg'));
        });
    };

    //需要编辑的图片列表
    function backimg(picList, picTxtList, IsBackImg, IsBackTxt, IsNotMod) {
        if (IsBackImg) {
            var data = eval("(" + picList + ")");

            var dataTxt = new Array(data.length);
            for (var i = 0; i <= data.length - 1; i++) {
                dataTxt[i] = "暂无描述..."
            }
            if (picTxtList.length > 1) {
                dataTxt = eval("(" + picTxtList + ")");
            }
            console.log(dataTxt);
            $.each(data, function (index, item) {
                getFileObject(item, function (fileObject) {
                    var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'), fileObject);
                    var file = new WebUploader.File(wuFile);
                    webUploader.addFiles(file)

                    //回显不显示进度条
                    var $fileBox = $('#fileBox_' + file.id);

                    if (IsBackTxt) {
                        $fileBox.attr('title', dataTxt[index]);
                        $fileBox.find('.diyTxtPic').text(dataTxt[index]);
                        $fileBox.find('.diyTxtPic').show();
                    }

                    if (IsNotMod) {
                        $fileBox.find('.diyControl').hide();
                    }

                    var $diyBar = $fileBox.find('.diyBar');
                    $diyBar.find('.diyProgress').hide();
                })
            });
        }
    }
    /////图片结束

    //操作进度条;
    function showDiyProgress(progress, $diyBar, text) {
        //alert(progress);
        if ( progress >= 100 ) {
            progress = progress + '%';
            text = text || '上传完成';
        } else {
            progress = progress + '%';
            text = text || progress;
        }

        var $diyProgress = $diyBar.find('.diyProgress');
        $diyProgress.width( progress ).text( text );

    }

    //取消事件;
    function removeLi ( $li ,file_id ,webUploader) {
        webUploader.removeFile( file_id );
        $li.remove();

        //移除view ,同时清除已经上传后写到input里value的图片地址
        //var reg = new RegExp($li.attr("mya"), "g");
        //$("#xsimg").val().replace(reg, "");
        //$("#xsimg").val($("#xsimg").val().replace(reg, ""));

    }

    //左移事件;
    function leftLi ($leftli, $li) {
        $li.insertBefore($leftli);
    }

    //右移事件;
    function rightLi ($rightli, $li) {
        $li.insertAfter($rightli);
    }

    //创建文件操作div;
    function createBox( $fileInput, file, webUploader ) {
        var file_id = file.id;
        var $parentFileBox = $fileInput.parents(".upload-ul");
        var file_len=$parentFileBox.children(".diyUploadHover").length;

        //添加子容器;
        var li = '<li id="fileBox_' + file_id + '" class="diyUploadHover"> \
					<div class="viewThumb">\
					     <p class="diyTxtPic" title=" ">暂无描述...</p>\
					    <input type="hidden">\
					    <div class="diyBar"> \
							<div class="diyProgress">0%</div> \
					    </div> \
					    <p class="diyControl"><span class="diyLeft iconfont">&#xe738;</span><span class="diyCancel iconfont">&#xe6fe;</span><span class="diyRight iconfont">&#xe739;</span><span class="diyFullScreen iconfont">&#xe70e;</span></p>\
					</div> \
				</li>';

        $parentFileBox.prepend( li );

        var $fileBox = $parentFileBox.find('#fileBox_'+file_id);

        //绑定取消事件;
        var $diyCancel = $fileBox.find('.diyCancel').one('click', function () {
            removeLi( $(this).parents('.diyUploadHover'), file_id, webUploader );
        });

        //绑定左移事件;
        $fileBox.find('.diyLeft').on('click',function(){
            leftLi($(this).parents('.diyUploadHover').prev(), $(this).parents('.diyUploadHover'));
        });

        //绑定右移事件;
        $fileBox.find('.diyRight').on('click',function(){
            rightLi($(this).parents('.diyUploadHover').next(), $(this).parents('.diyUploadHover') );
        });

        //绑定全屏预览
        $fileBox.find('.diyFullScreen').on('click', function () {
           ////页面层 - 图片
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['auto'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<img src=\"' + $fileBox.attr('mya') + '\" style=\"max-width: 100%;\">'
            });
        });

        if ( file.type.split("/")[0] != 'image' ) {
            var liClassName = getFileTypeClassName( file.name.split(".").pop() );
            $fileBox.addClass(liClassName);
            return;
        }

        //添加文字描述
        $fileBox.find('.diyTxtPic').on('click', function () {
            Dialog.init('<input type="text" placeholder="请输入图片描述"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>', {
                title: '输入点什么吧！',
                button: {
                    确定: function () {
                        //if (this.querySelector('input').value.length >= 5) {
                        console.log($(this).parents('.diyUploadHover'));
                        $("#fileBox_" + file_id).attr('title', this.querySelector('input').value);
                        $("#fileBox_" + file_id).find('.diyTxtPic').text(this.querySelector('input').value);
                        $("#fileBox_" + file_id).find('.diyTxtPic').attr('title', this.querySelector('input').value);
                            //Dialog.init('你输入的内容是：' + this.querySelector('input').value);
                            Dialog.close(this);
                        //} else {
                        //    Dialog.init('你输入的内容不符合要求！', 1100);
                        //};
                    },
                    删除: function () {
                        $("#fileBox_" + file_id).attr('title', "");
                        $("#fileBox_" + file_id).find('.diyTxtPic').text("");
                        $("#fileBox_" + file_id).find('.diyTxtPic').attr("");
                        Dialog.close(this);
                    },
                    点击关闭: function () {
                        //Dialog.init('你点击了关闭', 1000);
                        Dialog.close(this);
                    }
                }
            });
        });

        //预览
        //$fileBox.on('click', function () {
        //$fileBox.on('click', function () {
        //    //alert($(this).attr('mya'));
        //    //页面层 - 图片
        //    layer.open({
        //        type: 1,
        //        title: false,
        //        closeBtn: 0,
        //        area: ['auto'],
        //        skin: 'layui-layer-nobg', //没有背景色
        //        shadeClose: true,
        //        content: '<img src=\"' + $(this).attr('mya') + '\" style=\"max-width: 100%;\">'
        //    });
        //    //content: '<img src=\"' + $(this).parents('.diyUploadHover').attr('mya') + '\" style=\"max-width: 100%;\">'
        //});

        //生成预览缩略图;
        webUploader.makeThumb( file, function( error, dataSrc ) {
            if (!error) {
                //$.post("/js/webUpload_Img/baseToImg.ashx", { _base64: dataSrc }, function (data) {
                //    console.log(data)
                //});
                $fileBox.find('.viewThumb').append('<img src="' + dataSrc + '" >');
                
            }
        });
    }

    //获取文件类型;
    function getFileTypeClassName ( type ) {
        var fileType = {};
        var suffix = '_diy_bg';
        fileType['pdf'] = 'pdf';
        fileType['ppt'] = 'ppt';
        fileType['doc'] = 'doc';
        fileType['docx'] = 'doc';
        fileType['jpg'] = 'jpg';
        fileType['zip'] = 'zip';
        fileType['rar'] = 'rar';
        fileType['xls'] = 'xls';
        fileType['xlsx'] = 'xls';
        fileType['txt'] = 'txt';
        fileType = fileType[type] || 'ppt';
        return 	fileType+suffix;
    }
})( jQuery );